{% extends 'base.html' %}

{% block head %}
{{ super() }}
<style>
.form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.form-title {
    color: #2c3e50;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-control:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 0.2rem rgba(74,144,226,0.25);
}

.btn-group {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

.required-field::after {
    content: "*";
    color: red;
    margin-left: 4px;
}
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    <h2 class="form-title">
        <i class="fas fa-user-md"></i> 添加新医生
    </h2>

    <form method="post">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="name" class="required-field">姓名</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="gender" class="required-field">性别</label>
                    <select class="form-control" id="gender" name="gender" required>
                        <option value="">请选择性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="title" class="required-field">职称</label>
                    <select class="form-control" id="title" name="title" required>
                        <option value="">请选择职称</option>
                        <option value="主任医师">主任医师</option>
                        <option value="副主任医师">副主任医师</option>
                        <option value="主治医师">主治医师</option>
                        <option value="住院医师">住院医师</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="department" class="required-field">所属科室</label>
                    <select class="form-control" id="department" name="department_id" required>
                        <option value="">请选择科室</option>
                        {% for dept in departments %}
                        <option value="{{ dept['科室ID'] }}">{{ dept['科室名称'] }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="phone" class="required-field">联系电话</label>
                    <input type="tel" class="form-control" id="phone" name="phone" required
                           pattern="[0-9]{11}" title="请输入11位手机号码">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="hire_date" class="required-field">入职日期</label>
                    <input type="date" class="form-control" id="hire_date" name="hire_date" required>
                </div>
            </div>
        </div>

        <div class="btn-group">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> 添加医生
            </button>
            <a href="{{ url_for('doctors') }}" class="btn btn-secondary">
                <i class="fas fa-times"></i> 取消
            </a>
        </div>
    </form>
</div>

<script>
document.querySelector('form').addEventListener('submit', function(e) {
    const phone = document.getElementById('phone').value;
    if (!/^[0-9]{11}$/.test(phone)) {
        e.preventDefault();
        alert('请输入正确的11位手机号码！');
    }
});

// 设置入职日期的默认值为今天
document.getElementById('hire_date').valueAsDate = new Date();
</script>
{% endblock %}

